renameFolderMenu: Use a custom menu item inheriting from PopupBaseMenuItem

The RenameFolderMenu uses the internal box as a menu item, while PopupMenu
expects to have PopupBaseMenuItem based children with a delegate set.

Instead of using a custom menu with a customized box acting as menu
item,just add a RenameFolderMenuItem that inherits from the parent,
adjusting the features as we need them. In fact, the rename folder menu item
doesn't need any label, padding or default styling so we can reuse
PopupMenuBaseItem after we use our styling properties and we set the
Ornament to HIDDEN.

To get the proper style in place, define rename-folder-popup and
rename-folder-popup-item to override the default popup-menu-item rule
padding instead of using margins.

Pass the menu item as menu's focusActor as this will key-focus it on pop-up,
by overriding the key_focus_in() vfunc we can then delegate the focus
handling to the entry's clutter-text.

Also override the map() vfunc in order to update the entry's content before
mapping the entry.

Finally, use the item's activate method in order to tell the parent menu
we're done with it and that the menu can be closed.

As consequence we can also remove the menu's popup() method, and just use
the default open().

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/720

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 852b505f1876d9ca874eff88197f77e2fc200c13..9724a8f971b8356b2017f12fdc4dba211ff4b95f 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -610,13 +610,12 @@ StScrollBar {
     border-bottom-style: solid;
   }
 
-
 // Rename popup
-
-.rename-folder-popup-box {
-  spacing: 6px;
-  margin-left: 12px;
-  margin-right: 12px;
+.rename-folder-popup {
+  .rename-folder-popup-item {
+    spacing: 6px;
+    &:ltr, &:rtl { padding: 0, 12px; }
+  }
 }
 
 // Background menu

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 2d5283c6868a62c39969b87baaeb562a8f5d3619..9147d4c02c679259c5a97110e9bc3871b7413757 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1699,7 +1699,7 @@ var FolderIcon = class FolderIcon {
         }
 
         this.actor.set_hover(true);
-        this._menu.popup();
+        this._menu.open();
         this._menuManager.ignoreRelease();
     }
 
@@ -1713,27 +1713,23 @@ var FolderIcon = class FolderIcon {
 };
 Signals.addSignalMethods(FolderIcon.prototype);
 
-var RenameFolderMenu = class RenameFolderMenu extends PopupMenu.PopupMenu {
-    constructor(source, folder) {
-        super(source.actor, 0.5, St.Side.BOTTOM);
+var RenameFolderMenuItem = GObject.registerClass(
+class RenameFolderMenuItem extends PopupMenu.PopupBaseMenuItem {
+    _init(folder) {
+        super._init({
+            style_class: 'rename-folder-popup-item',
+            reactive: false,
+        });
+        this.setOrnament(PopupMenu.Ornament.HIDDEN);
 
         this._folder = folder;
 
-        // We want to keep the item hovered while the menu is up
-        this.blockSourceEvents = true;
-
-        let box = new St.BoxLayout({ style_class: 'rename-folder-popup-box' });
-        this.box.add_child(box);
-
         // Entry
         this._entry = new St.Entry({
             x_expand: true,
             width: 200,
         });
-        box.add_child(this._entry);
-
-        // Focus the text entry on menu pop-up
-        this.focusActor = this._entry.clutter_text;
+        this.add_child(this._entry);
 
         this._entry.clutter_text.connect(
             'notify::text', this._validate.bind(this));
@@ -1748,30 +1744,20 @@ var RenameFolderMenu = class RenameFolderMenu extends PopupMenu.PopupMenu {
             can_focus: true,
             label: _('Rename'),
         });
-        box.add_child(this._button);
+        this.add_child(this._button);
 
         this._button.connect('clicked', this._updateFolderName.bind(this));
-
-        // Chain our visibility and lifecycle to that of the source
-        this._sourceMappedId = source.actor.connect('notify::mapped', () => {
-            if (!source.actor.mapped)
-                this.close();
-        });
-        source.actor.connect('destroy', () => {
-            source.actor.disconnect(this._sourceMappedId);
-            this.destroy();
-        });
-
-        Main.uiGroup.add_actor(this.actor);
     }
 
-    popup() {
-        let folderName = _getFolderName(this._folder);
-
-        this._entry.text = folderName;
-        this._entry.clutter_text.set_selection(0, folderName.length);
+    vfunc_map() {
+        this._entry.text = _getFolderName(this._folder);
+        this._entry.clutter_text.set_selection(0, -1);
+        super.vfunc_map();
+    }
 
-        this.open();
+    vfunc_key_focus_in() {
+        super.vfunc_key_focus_in();
+        this._entry.clutter_text.grab_key_focus();
     }
 
     _isValidFolderName() {
@@ -1794,7 +1780,35 @@ var RenameFolderMenu = class RenameFolderMenu extends PopupMenu.PopupMenu {
         let newFolderName = this._entry.text.trim();
         this._folder.set_string('name', newFolderName);
         this._folder.set_boolean('translate', false);
-        this.close();
+        this.activate(Clutter.get_current_event());
+    }
+});
+
+var RenameFolderMenu = class RenameFolderMenu extends PopupMenu.PopupMenu {
+    constructor(source, folder) {
+        super(source.actor, 0.5, St.Side.BOTTOM);
+        this.actor.add_style_class_name('rename-folder-popup');
+
+        // We want to keep the item hovered while the menu is up
+        this.blockSourceEvents = true;
+
+        let menuItem = new RenameFolderMenuItem(folder);
+        this.addMenuItem(menuItem);
+
+        // Focus the text entry on menu pop-up
+        this.focusActor = menuItem;
+
+        // Chain our visibility and lifecycle to that of the source
+        this._sourceMappedId = source.actor.connect('notify::mapped', () => {
+            if (!source.actor.mapped)
+                this.close();
+        });
+        source.actor.connect('destroy', () => {
+            source.actor.disconnect(this._sourceMappedId);
+            this.destroy();
+        });
+
+        Main.uiGroup.add_actor(this.actor);
     }
 };
 Signals.addSignalMethods(RenameFolderMenu.prototype);